<template>
  <div class="slider-wrapper">
    <div class="slider-content">
      <a-slider :value="value" v-bind="$attrs" v-on="$listeners" />
    </div>
    <div class="slider-result">
      <a-badge
        :count="value"
        :overflow-count="overflowCount"
        :number-style="{
          backgroundColor: '#eee',
          color: '#333',
          boxShadow: '0 0 0 1px #d9d9d9 inset'
        }"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: Number,
    overflowCount: {
      type: Number,
      default: 999
    }
  },
  model: {
    event: 'change',
    prop: 'value'
  }
}
</script>

<style scoped>
.slider-wrapper {
  display: flex;
}
.slider-content {
  flex-grow: 1;
  margin-right: 5px;
}

.slider-result {
  flex: 0 0;
}
</style>
